<template>
    <div class="body">
        <div class="title">
            <span style="margin-right: 10px" @click="back">{{preType}}</span>
            <span @click="addArticle">{{type}}</span>
        </div>

        <div class="tag_list">
            <div class="empty" v-show="list.length === 0">Here is empty (oﾟvﾟ)ノ</div>
            <div class="tag" v-for="item in list" v-bind:key="item.name" @click="enter(item.id)">
                <div class="tag_name">
                    {{item.name}}
                </div>
                <div class="tag_time">
                    {{item.time}}
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "List",
        data(){
            return{
                type: "Tags",
                preType: "",
                tagId: null,
                list: [{"id":null,"name":null,"time":null}],
            }
        },
        methods:{
            getTagData:function () {
                this.axios.get("/tag/get_all",{
                    params:{
                        "token": sessionStorage.getItem("token")
                    }
                })
                    .then(res => {
                        res = res.data
                        this.list = res.data.list
                    })
                    .catch(e => {
                        this.$message({
                            message: e,
                            type: "error"
                        })
                        window.location.href = './login'
                    })
            },
            getArticleData:function () {
                // eslint-disable-next-line no-undef
                axios.get("/article/get_by_tag_basic",{
                    params:{
                        "tag_id": this.$route.query.tag_id,
                        "token": sessionStorage.getItem("token")
                    }
                })
                .then(res => {
                    res = res.data
                    console.log(res.data.list)
                    this.list = res.data.list
                })
                .catch(e => {
                    this.$message({
                        message: e,
                        type: "error"
                    })
                    window.location.href = './login'
                })
            },
            enter:function (id) {
                if (this.type === "Tags"){
                    window.location.href = "./article?tag_id=" + id
                } else if (this.type === "Articles"){
                    window.location.href = "./content?id=" + id
                }
            },
            back:function () {
                window.location.href = "./tag"
            },
            addArticle:function () {
                if (this.type === "Articles"){
                    window.location.href = './add_article?tag_id=' + this.$route.query.tag_id
                } else if (this.type === "Tags"){
                    window.location.href = './add_tag'
                }
            }
        },
        props:{
            listName: String,
        },
        created() {
            if (this.listName === "tag"){
                this.type = "Tags"
                this.getTagData()
            } else if (this.listName === "article"){
                this.preType = "Tags"
                this.type = "Articles"
                this.getArticleData()
            }
        }
    }
</script>

<style scoped lang="scss">
    .body{

        width: 50%;
        margin: 100px auto;

        .title{
            text-align: left;
            font-size: 28px;
            font-weight: 600;

            margin-bottom: 50px;

            &:hover{
                cursor: pointer;
            }
        }

        .tag_list{
            display: flex;
            flex-direction: column;

            .empty{
                font-size: 20px;
                font-weight: 400;
            }

            .tag{
                padding-left: 50px;
                padding-right: 50px;
                height: 30px;
                line-height: 30px;
                padding-bottom: 5px;
                border-bottom: 1px dashed darkgrey;
                color: darkgrey;

                font-size: 20px;
                font-weight: 300;

                text-align: left;

                margin-bottom: 20px;

                display: flex;
                flex-direction: row;

                div{
                    height: 30px;
                }
                .tag_name{
                    flex-grow: 4;
                    text-align: left;
                }

                .tag_time{
                    flex-grow: 1;
                    text-align: right;
                }
                &:hover{
                    cursor: pointer;
                    color: grey;
                    border-bottom: 2px dashed grey;
                }
            }
        }
    }
</style>
